<template>
  <div class="EWManagement">
    <div class="yujingshouye">
      <div class="yujleft">
        <div class="yujleft-top border-r">
          <mapContent mapId="yjsy"></mapContent>
        </div>
        <div class="yujleft-bot border-r">
          <measures></measures>
        </div>
      </div>
      <div class="yujright">
        <div class="yujright-top titleName">{{ warningNoticeName }}</div>
        <div class="yujright-bot">
          <div class="yjr-b-l">
            <div class="yjsytop">
              <div class="yjdd1">
                <information @infoId="getInfoId" @id="getId" @getWarningNoticeName="getWarningNoticeName"></information>
              </div>
              <div class="yjdd2 border-r">
                <notice :id="listId" @chartsDialog="noticeDialog"></notice>
              </div>
            </div>
            <div class="yjsybot">
              <div class="yjdd3 border-r">
                <affectEquipment></affectEquipment>
              </div>
              <div class="yjdd4 border-r">
                <resourceReserve @chartsDialog="resourceDialog" :id="listId"></resourceReserve>
              </div>
            </div>
          </div>
          <div class="yjr-b-r">
            <TimeLine :infoId="infoId" :timeLineInfoId="timeLineInfoId"></TimeLine>
          </div>
        </div>
      </div>
    </div>
    <LsdDialog :dialogConfig="dialogConfig" @close="close">
      <div class="box" slot="dialog" style="height: 100%;display: flex;flex-direction: column;">
        <DexTable ref="DexTable" :config="tableConfig" :data="tableData" @handleCurrentChange="handleCurrentChange"
          :total="total" height="100%"></DexTable>
      </div>
    </LsdDialog>
  </div>
</template>

<script>
import TimeLine from "./HomePageContent/TimeLine.vue";
import affectEquipment from "./HomePageContent/affectEquipment.vue";
import information from "./HomePageContent/information.vue";
import measures from "./HomePageContent/measures.vue";
import notice from "./HomePageContent/notice.vue";
import resourceReserve from "./HomePageContent/resourceReserve.vue";
// import mapContent from "./HomePageContent/mapContent.vue";
import mapContent from "../SystemHomepage/HomePageContent/mapContent.vue";
import DexTable from "@/components/DexTable.vue";
import { listPageTask } from "@/api/EarlyWarningManagement/yjrw.js";
import { getResourcesByNotId } from "@/api/EarlyWarningManagement/homepagecontent.js";
import { yjTableConfig, dwTableConfig, clTableConfig, zbTableConfig, wzTableConfig } from "./config";
export default {
  name: "EWManagement",
  components: {
    affectEquipment,
    information,
    measures,
    notice,
    resourceReserve,
    mapContent,
    TimeLine,
    DexTable
  },
  data() {
    return {
      warningNoticeName: "",
      listId: "",
      infoId: "",
      timeLineInfoId: "",
      dialogConfig: {
        title: "",
        isShow: false, // 弹窗显示隐藏
        btnList: [],
        type: "",
        data: {}
      },
      tableConfig: [],
      tableData: [],
      total: 0,
      flowCode: {
        "待接收": 2,
        "已反馈": 1,
        "未反馈": 0
      }
    };
  },
  methods: {
    getInfoId(val) {
      this.infoId = val;
    },
    getId(val) {
      this.listId = val;
    },
    getWarningNoticeName(val) {
      this.warningNoticeName = val;
    },
    close() {
      this.dialogConfig.isShow = false;
    },
    noticeDialog(name, id, deptId) {
      this.dialogConfig.title = name;
      this.tableConfig = yjTableConfig;
      this.dialogConfig.type = 1;
      const type = name === "未反馈" ? 0 : name === "已反馈" ? 1 : 2;
      this.listPageTask({ deptId, id, type });
    },
    resourceDialog(name, noticeId, type, unit) {
      if (type == 1) {
        this.tableConfig = dwTableConfig;
        this.dialogConfig.title = "队伍";
      } else if (type == 2) {
        this.tableConfig = clTableConfig;
        this.dialogConfig.title = "车辆";
      } else if (type == 3) {
        this.tableConfig = zbTableConfig;
        this.dialogConfig.title = "装备";
      } else {
        this.tableConfig = wzTableConfig;
        this.dialogConfig.title = "物资";
      }
      this.dialogConfig.type = 2;
      this.getResourcesByNotId({ name, noticeId, type, unit });
    },
    async listPageTask(data) {
      this.dialogConfig.data = data;
      const parmas = {
        pageNum: 1,
        pageSize: 10
      };
      const res = await listPageTask(Object.assign(parmas, data));
      if (res) {
        this.tableData = res;
        this.total = this.tableData.length;
        this.dialogConfig.isShow = true;
        this.$nextTick(() => {
          this.$refs.DexTable.setFlex();
        });
      }
    },
    async getResourcesByNotId(data) {
      this.dialogConfig.data = data;
      const parmas = {
        pageNum: 1,
        pageSize: 10
      };
      const res = await getResourcesByNotId(Object.assign(parmas, data));
      if (res) {
        const type = {
          1: "baseResourceTeamList",
          2: "baseResourceVehicleList",
          3: "baseResourceEquipList",
          4: "baseResourceSuppliesList"
        };
        const obj = res.mapList.find(item => item.name == data.unit);
        const list = obj[type[data.type]];
        this.tableData = list.data;
        this.total = list.total;
        this.dialogConfig.isShow = true;
        this.$nextTick(() => {
          this.$refs.DexTable.setFlex();
        });
      }
    },
    handleCurrentChange(val) {
      if (this.dialogConfig.type == 1) {
        this.listPageTask({ ...this.dialogConfig.data, ...val });
      } else if (this.dialogConfig.type == 2) {
        this.getResourcesByNotId({ ...this.dialogConfig.data, ...val });
      }
    }
  }
};

</script>

<style scoped lang="less">
.EWManagement {
  width: 100%;
  height: 99%;
  overflow: auto;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow: auto;

  div {
    box-sizing: border-box;
  }

  .border-r {
    border: 1px #0649d7 solid;
    border-radius: 5px;
  }

  .titleName {
    text-align: center;
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }

  .yujingshouye {
    height: 100%;
    display: flex;
    justify-content: space-between;

    .yujleft {
      width: 32%;
      height: 100%;
      display: flex;
      flex-direction: column;
      margin-right: 16px;

      .yujleft-top {
        width: 100%;
        height: 54%;
        margin-bottom: 16px;
      }

      .yujleft-bot {
        width: 100%;
        flex: 1;
      }
    }

    .yujright {
      width: calc(68% - 16px);
      position: relative;
      // padding-top: 40px;
      height: 100%;
      display: flex;
      flex-direction: column;

      .yujright-bot {
        height: 100%;
        display: flex;

        .yjr-b-l {
          width: 74%;
          display: flex;
          flex-direction: column;
          height: 100%;
          margin-right: 16px;

          .yjsytop {
            width: 100%;
            height: 54%;
            display: flex;
            margin-bottom: 16px;
            padding-top: 40px;

            .yjdd2 {
              flex: 1;
              height: 100%;
            }

            .yjdd1 {
              width: 54%;
              margin-right: 16px;
            }
          }

          .yjsybot {
            flex: 1;
            width: 100%;
            display: flex;

            .yjdd3 {
              width: 54%;
              margin-right: 16px;
              height: 100%;
            }

            .yjdd4 {
              width: calc(46% - 16px);
              height: 100%;
            }
          }
        }

        .yjr-b-r {
          padding-top: 40px;
          height: 100%;
          flex: 1;
        }
      }
    }
  }
}

.EWManagement::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
</style>
